<template>
	<view class="apply-question-page">
		<mynavBar :title="title" :imgurl="imgurl" :gps="gps" :bgcolor="bgColor"></mynavBar>
		<view class="apply-question-content">
			<view class="question-content-label">
				<view class="content-label-header">
					<view class="label-header-title">
						<span>专业标签</span>
					</view>
					<span>最多可选5个标签</span>
				</view>
				<view class="content-label-card">
					<view @click="activelabel(index)" class="label-card-list"
						:class="item.disable?'label-card-listactive':''" v-for="(item,index) in labelList"
						:key="item.id">
						<span>{{item.name}}</span>
					</view>
				</view>
			</view>
			<view class="apply-question-brief">
				<view class="question-brief-header">
					<view class="question-brief-title">
						<span>个人简介</span>
					</view>
				</view>
				<view class="question-brief-content">
					<u--textarea v-model="briefvalu" :placeholder="briefplac" border="none"></u--textarea>
				</view>
			</view>

			<view class="apply-img-brief">
				<view class="question-brief-header">
					<view class="question-brief-title">
						<span>图片证明</span>
					</view>
					<view class="img-upload">
						<uni-icons type="images" size="24" @click="getImg"></uni-icons>
					</view>
					<view class="img-profile">
						可上传最多3张图片
					</view>
				</view>

			</view>

			<view class="review" v-if="imageList[0]">

				<view class="review-upload" v-if="imageList[0]">
					<u-upload :fileList="imageList" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="3" :previewFullImage="true" :width="100" :height="100">
					</u-upload>
				</view>
			</view>
			<span class="apply-question-messge">以下联系方式仅为审核使用</span>
			<view class="apply-question-tel" :class="testtel?'apply-question-teltest':''">
				<view class="question-tel-title">
					手机号
				</view>
				<u-input placeholder="(必填)" border="none" type="number" confirmType="done" v-model="telvalue"
					@change="testnumber" @blur="testnumber"></u-input>
			</view>
			<span style="color: red; font-size: 18rpx;" v-if="testtel">请输入正确的手机号</span>
			<view class="apply-question-wx">
				<view class="question-wx-title">
					微信号
				</view>
				<u-input placeholder="(选填)" border="none" v-model="wxvalue"></u-input>
			</view>
			<view class="apply-question-footer">

				<u-checkbox-group>
					<u-checkbox @change="changecheckbox" v-model="checked" shape="square" iconColor="#000000" label=""
						activeColor="#F09500"></u-checkbox>
				</u-checkbox-group>
				<view class="question-footer-font">
					<span>我已阅读并接受</span>
					<span class="question-footer-text">《用户协议》</span>
					<span> , </span>
					<span class="question-footer-text">《答主规则》</span>
					<span>和</span>
					<span class="question-footer-text">《隐私协议》</span>
				</view>

			</view>
			<view class="apply-question-btn">
				<view class="question-btn-submit" v-if="briefvalu&&telvalue&&checked&&!testtel">
					<span @click="toggle('center')">提交申请</span>
				</view>
				<view class="question-btn-submit" v-else style="background-color: #ccc;">
					<span>提交申请</span>
				</view>
			</view>
		</view>
		<!-- 审核中或已是答主弹窗 -->
		<uni-popup ref="popuptwo" background-color="#fff" @change="popuchange" :mask-click="false">
			<view class="popup-content">
				<view class="popup-bady">
					<img :src="queryIconImage(`indexlogo1`)" alt="" class="popup-content-logo">
					<span class="popup-bady-title">答主申请审核中</span>
					<p>您提交的申请成为答主资料正在审核中！</p>
					<p>会有官方人员与您联系！</p>
					<p>审核通过后，您可在社区进行问题解答，并获得收益。</p>
					<view class="popup-bady-submit" @click="popugoindextwo">
						<span>返回首页</span>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupthree" background-color="#fff" @change="popuchange" :mask-click="false">
			<view class="popup-content">
				<view class="popup-bady">
					<img :src="queryIconImage(`indexlogo1`)" alt="" class="popup-content-logo">
					<span class="popup-bady-title">答主申请已通过</span>
					<p>您提交的申请成为答主已通过！</p>
					<p>您现在已经是答主可在社区进行问题解答，并获得收益。</p>
					<view class="popup-bady-submit" @click="popugoindextwo">
						<span>返回首页</span>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 提交成功后的弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="popuchange">
			<view class="popup-content">
				<view class="popup-bady">
					<img :src="queryIconImage(`indexlogo1`)" alt="" class="popup-content-logo">
					<span class="popup-bady-title">申请成功</span>
					<p>您的答主申请已经提交成功！</p>
					<p>会有官方人员与您联系！</p>
					<p>审核通过后，您可在社区进行问题解答，并获得收益。</p>
					<view class="popup-bady-submit" @click="popugoindex">
						<span>返回首页</span>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mynavBar from '@/components/mynavBar/mynavBar.vue'
	export default {
		components: {
			mynavBar
		},
		data() {
			return {
				testtel: false,
				imageList: [],
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				imgurl: '../../../static/headerbackground1.png',
				type: 'center',
				checked: '',
				wxvalue: '',
				telvalue: '',
				briefvalu: '',
				briefplac: '提示：写一个简短的说明，介绍你的专业领域和音乐知识。以便大家更好的认识你，并向你发起提问。\r\n\r\n\r\n\r\n也可以留下自己其它平台的社交账号进行引流，本平台对此不设限制',
				title: '申请成为答主',
				labelList: [{
					id: 1,
					name: '钢琴',
					disable: false
				}, {
					id: 2,
					name: '贝斯',
					disable: false
				}, {
					id: 3,
					name: '手风琴',
					disable: false
				}, {
					id: 4,
					name: '长笛',
					disable: false
				}, {
					id: 5,
					name: '小提琴教学',
					disable: false
				}, {
					id: 6,
					name: '架子鼓',
					disable: false
				}, {
					id: 7,
					name: '吉他',
					disable: false
				}, ],
				labelListvalue: []
			};
		},

		onLoad(option) {

			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top + ''
			console.log("胶囊位置信息", arr);
			//#endif
			this.$nextTick(() => {
				if (option.type == '审核中') {
					this.$refs.popuptwo.open('center')
				}
				if (option.type == '已通过') {
					this.$refs.popupthree.open('center')
				}
			})
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 50) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 50 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.9)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		methods: {
			//读取会
			afterRead(event) {
				for (let index in event.file) {
					this.imageList.push({
						url: event.file[index].url
					})
				}
			},

			// 删除图片

			deletePic(event) {
				const result = this.imageList.find(x => x.url === event.file.url)
				this.imageList = this.imageList.filter(function(item) {
					return item.url !== result.url;
				})
			},
			//得到图片
			getImg() {
				var that = this
				var count = 3 - that.imageList.length
				if (that.imageList.length == 0) {
					uni.chooseMedia({
						count: 3,
						mediaType: ['image'],
						sourceType: ['album', 'camera'],
						sizeType: ['original', 'compressed'],
						success: function(res) {
							for (let i = 0; i < res.tempFiles.length; i++) {
								that.imageList.push({
									url: res.tempFiles[i].tempFilePath
								})
							}
						}
					})
				} else if (count == 0) {
					uni.showToast({
						title: '最多上传三张图片',
						duration: 1000,
						icon: 'error'
					})
				} else {
					uni.chooseMedia({
						count: count,
						mediaType: ['image'],
						sourceType: ['album', 'camera'],
						sizeType: ['original', 'compressed'],
						success: function(res) {
							for (let i = 0; i < res.tempFiles.length; i++) {
								that.imageList.push({
									url: res.tempFiles[i].tempFilePath
								})
							}
						}
					})
				}

			},

			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			testnumber() {
				let testuntils = /^1[3-9]\d{9}$/
				if (testuntils.test(this.telvalue)) {
					this.testtel = false
				} else {
					this.testtel = true
				}
				console.log('输入框输入验证', this.telvalue);
			},
			popugoindex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			popugoindextwo() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toggle(type) {
				this.$store.dispatch("remote/mutation", {
					operation: "update_user",
					where: {
						id: {
							_eq: uni.getStorageSync('userInfo').id
						}
					},
					_set: {
						is_answer: '审核中',
						tag_list: JSON.stringify(this.labelListvalue),
						profile: this.briefvalu,
						mobile: this.telvalue,
						wx_number: this.wxvalue
					},
					field_string: 'id is_answer sex wx_mini_openid mobile email nickname avatar{url} avatar_id user_interest{id user_user user_fans_user} background_img{url} profile tag_list attach_data '

				}).then(res => {
					uni.setStorageSync('userInfo', res.returning[0])
					if (this.imageList.length != 0) {
						this.insertImg()
					}
					console.log('申请成功', res);
					this.type = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup.open("center")
				})

			},
			async insertImg() {
				for (let i in this.imageList) {

					await this.$store.dispatch('app/upload', {
						method: 'uimage',
						file: {
							path: this.imageList[i].url
						}
					}).then(res => {
						this.$store.dispatch('remote/mutation', {
							operation: "insert_user_profileimage",
							objects: [{
								image_id: res.imageId,
								user_user: uni.getStorageSync('userInfo').id,
								type: '答主证明'
							}]
						})
					})

				}
			},
			popuchange(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			changecheckbox(e) {
				this.checked = e
				console.log("改变事件.....this.checked", this.checked);
			},
			activelabel(data) {
				this.labelList[data].disable = this.labelList[data].disable ? false : true
				let arr = []
				this.labelList.forEach(v => {
					if (v.disable) {
						let obj = {}
						obj.label = v.name
						arr.push(obj)
					}
				})
				if (arr.length > 5) {
					if (this.labelList[data].disable = true) {
						this.labelList[data].disable = false
					}
					return
				}
				this.labelListvalue = arr
				console.log('选择的标签数组', this.labelListvalue);
			}
		}
	}
</script>

<style lang="scss">
	.apply-question-page {
		width: 100%;
		background-color: #f4f4f4;

		.uni-popup .uni-popup__wrapper {
			border-radius: 10rpx;
		}

		.popup-content {
			width: 595rpx;
			height: 440rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx 45rpx 50rpx 55rpx;

			.popup-bady {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				text-align: center;

				.popup-content-logo {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 12rpx;
				}

				.popup-bady-title {
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.8);
					line-height: 40rpx;
					margin-bottom: 16rpx;
				}

				.popup-bady-submit {
					width: 455rpx;
					height: 70rpx;
					background: #F09500;
					border-radius: 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
					margin-top: 12rpx;
				}
			}
		}

		.apply-question-content {
			margin-top: -170rpx;
			box-sizing: border-box;
			width: 100%;
			border: none;
			padding: 0 27rpx;
			z-index: 99999;
			padding-bottom: 110rpx;



			.question-content-label {
				width: 100%;
				height: 390rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				padding: 35rpx 13rpx 0 22rpx;
				opacity: 1;
				margin-bottom: 30rpx;

				.content-label-header {
					width: 100%;
					height: 60rpx;
					display: flex;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #666666;
					line-height: 60rpx;
					margin-bottom: 20rpx;

					.label-header-title {
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8);
						line-height: 60rpx;
						padding-right: 20rpx;
						margin-right: 30rpx;
						border-right: 3rpx solid #ccc;
					}
				}

				.content-label-card {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;

					.label-card-list {
						border-radius: 48rpx;
						border: 2rpx solid #999999;
						padding: 13rpx 36rpx;
						min-width: 78rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 500;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
					}

					.label-card-list:nth-child(4) {
						margin-right: 0 !important;
					}

					.label-card-listactive {
						color: #fff;
						background-color: #F09500;
						border: 2rpx solid #F09500;
					}
				}
			}

			.apply-question-brief {
				width: 100%;
				height: 390rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				padding: 35rpx 28rpx 0 25rpx;
				margin-bottom: 30rpx;

				.question-brief-header {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					margin-bottom: 40rpx;
					display: flex;

					.question-brief-title {
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8);
						line-height: 60rpx;
						padding-right: 20rpx;
						margin-right: 30rpx;
						border-right: 3rpx solid #ccc;
					}
				}

				.question-brief-content {
					width: 100%;
					height: 160rpx;

					.brief-content-input {}
				}
			}

			.apply-img-brief {
				width: 100%;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				padding: 35rpx 28rpx 0 25rpx;
				margin-bottom: 30rpx;

				.question-brief-header {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					margin-bottom: 40rpx;
					display: flex;

					.question-brief-title {
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8);
						line-height: 60rpx;
						padding-right: 20rpx;
						margin-right: 30rpx;
						border-right: 3rpx solid #ccc;
					}
				}

				.img-profile {
					margin-left: 5px;
					font-size: 24rpx;
					color: #606266;
				}
			}

			.review {

				background: #ffffff;
				height: fit-content;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 35rpx 28rpx 0 25rpx;

				.review-upload {
					display: flex;
					height: 100%;
					justify-content: center;
					align-items: center;

				}

				.review-upload-video {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 200px;
					width: 100%;

					.review-upload-videoUrl {
						height: 90%;
						width: 90%;
					}

					.review-upload-videoCurcle {}
				}

			}

			.apply-question-messge {
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #F09500;
				line-height: 40rpx;
				display: inline-block;
				margin-bottom: 30rpx;
			}

			.apply-question-teltest {
				border: 2rpx solid red;
			}

			.apply-question-tel {
				width: 100%;
				box-sizing: border-box;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 45rpx 0 45rpx 57rpx;
				display: flex;
				// margin-bottom: 30rpx;

				.question-tel-title {
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					line-height: 40rpx;
					padding-right: 20rpx;
					border-right: 3rpx solid #ccc;
					margin-right: 20rpx;
				}
			}

			.apply-question-wx {
				width: 100%;
				box-sizing: border-box;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 45rpx 0 45rpx 57rpx;
				display: flex;
				margin-bottom: 10rpx;
				margin-top: 30rpx;

				.question-wx-title {
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					line-height: 40rpx;
					padding-right: 20rpx;
					border-right: 3rpx solid #ccc;
					margin-right: 20rpx;
				}
			}

			.apply-question-footer {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 190rpx;

				.question-footer-font {
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #999999;
					line-height: 40rpx;
					display: flex;
					margin-top: 4rpx;

					.question-footer-text {
						font-family: Alibaba PuHuiTi 2.0-65 Medium;
						font-weight: 600;
						color: #231815;
						border-bottom: 2rpx solid #231815;
					}
				}

				// vertical-align: middle;
			}

			.apply-question-btn {
				width: 100%;
				display: flex;
				justify-content: center;
				// margin-bottom: 110rpx;

				.question-btn-submit {
					width: 355rpx;
					height: 80rpx;
					background: #F09500;
					border-radius: 80rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 80rpx;
				}
			}
		}
	}
</style>